<template>
	<view class="container">
		<template v-if="cartList.length">
			<!-- 购物车列表 -->
			<view class="cart-list">
				<view class="cart-item" v-for="(item, index) in cartList" :key="index">
					<view class="checkbox">
						<checkbox :checked="item.checked" @tap="toggleSelect(index)" color="#ff7d00" />
					</view>
					<image class="product-image" :src="item.image" mode="aspectFill"></image>
					<view class="product-info">
						<text class="name">{{ item.name }}</text>
						<text class="price">¥{{ item.price }}</text>
						<view class="quantity-box">
							<text class="btn minus" @click="updateQuantity(index, -1)">-</text>
							<text class="quantity">{{ item.quantity }}</text>
							<text class="btn plus" @click="updateQuantity(index, 1)">+</text>
						</view>
					</view>
					<text class="delete" @click="deleteItem(index)">×</text>
				</view>
			</view>
			
			<!-- 底部结算栏 -->
			<view class="footer">
				<view class="select-all">
					<checkbox :checked="allSelected" @tap="toggleSelectAll" color="#ff7d00" />
					<text>全选</text>
				</view>
				<view class="total">
					<text>合计：</text>
					<text class="price">¥{{ totalPrice }}</text>
				</view>
				<view class="checkout" @click="checkout">
					<text>结算({{ selectedCount }})</text>
				</view>
			</view>
		</template>
		
		<!-- 空购物车 -->
		<view v-else class="empty-cart">
			<image src="/static/empty-cart.png" mode="aspectFit"></image>
			<text>购物车是空的</text>
			<button class="go-shopping" @click="goShopping">去逛逛</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cartList: [{
					id: 1,
					name: '新鲜草莓',
					price: '38.8',
					image: '/static/product/strawberry.jpg',
					quantity: 1,
					checked: true
				}, {
					id: 2,
					name: '有机生菜',
					price: '12.8',
					image: '/static/product/lettuce.jpg',
					quantity: 2,
					checked: true
				}]
			}
		},
		computed: {
			allSelected() {
				return this.cartList.length > 0 && this.cartList.every(item => item.checked)
			},
			selectedCount() {
				return this.cartList.filter(item => item.checked).length
			},
			totalPrice() {
				return this.cartList
					.filter(item => item.checked)
					.reduce((total, item) => {
						return total + parseFloat(item.price) * item.quantity
					}, 0)
					.toFixed(2)
			}
		},
		methods: {
			toggleSelect(index) {
				this.cartList[index].checked = !this.cartList[index].checked
			},
			toggleSelectAll() {
				const newStatus = !this.allSelected
				this.cartList.forEach(item => {
					item.checked = newStatus
				})
			},
			updateQuantity(index, delta) {
				const item = this.cartList[index]
				const newQuantity = item.quantity + delta
				if (newQuantity > 0) {
					item.quantity = newQuantity
				}
			},
			deleteItem(index) {
				uni.showModal({
					title: '提示',
					content: '确定要删除这个商品吗？',
					success: res => {
						if (res.confirm) {
							this.cartList.splice(index, 1)
						}
					}
				})
			},
			checkout() {
				if (this.selectedCount === 0) {
					uni.showToast({
						title: '请选择要结算的商品',
						icon: 'none'
					})
					return
				}
				uni.navigateTo({
					url: '/pages/order/create'
				})
			},
			goShopping() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	background: #f8f8f8;
	padding-bottom: 100rpx;
}

.cart-list {
	background: #fff;
	margin-top: 20rpx;
	
	.cart-item {
		display: flex;
		align-items: center;
		padding: 30rpx;
		position: relative;
		
		&:not(:last-child) {
			border-bottom: 1rpx solid #f5f5f5;
		}
		
		.checkbox {
			margin-right: 20rpx;
		}
		
		.product-image {
			width: 160rpx;
			height: 160rpx;
			border-radius: 12rpx;
			margin-right: 20rpx;
		}
		
		.product-info {
			flex: 1;
			
			.name {
				font-size: 28rpx;
				color: #333;
				margin-bottom: 10rpx;
			}
			
			.price {
				font-size: 32rpx;
				color: #ff7d00;
				font-weight: bold;
			}
			
			.quantity-box {
				display: flex;
				align-items: center;
				margin-top: 20rpx;
				
				.btn {
					width: 60rpx;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background: #f5f5f5;
					color: #333;
					font-size: 28rpx;
					
					&.minus {
						border-radius: 30rpx 0 0 30rpx;
					}
					
					&.plus {
						border-radius: 0 30rpx 30rpx 0;
					}
				}
				
				.quantity {
					width: 80rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					background: #f5f5f5;
					font-size: 28rpx;
				}
			}
		}
		
		.delete {
			position: absolute;
			right: 30rpx;
			top: 30rpx;
			font-size: 40rpx;
			color: #999;
			padding: 10rpx;
		}
	}
}

.footer {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100rpx;
	background: #fff;
	display: flex;
	align-items: center;
	padding: 0 30rpx;
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	
	.select-all {
		display: flex;
		align-items: center;
		
		text {
			font-size: 28rpx;
			color: #333;
			margin-left: 10rpx;
		}
	}
	
	.total {
		flex: 1;
		text-align: right;
		margin-right: 30rpx;
		
		text {
			font-size: 28rpx;
			color: #333;
		}
		
		.price {
			font-size: 36rpx;
			color: #ff7d00;
			font-weight: bold;
		}
	}
	
	.checkout {
		width: 200rpx;
		height: 70rpx;
		background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
		border-radius: 35rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		
		text {
			color: #fff;
			font-size: 28rpx;
		}
	}
}

.empty-cart {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 200rpx;
	
	image {
		width: 240rpx;
		height: 240rpx;
		margin-bottom: 30rpx;
	}
	
	text {
		font-size: 28rpx;
		color: #999;
		margin-bottom: 50rpx;
	}
	
	.go-shopping {
		width: 240rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: #ff7d00;
		color: #fff;
		border-radius: 40rpx;
		font-size: 28rpx;
	}
}
</style> 